import React from "react"
import "./style.less"
import DetailtHead from "../../../components/home_components/HouseDetail/DetailHead"
import Carousel from "../../../components/home_components/Carousel"
import HouseInfo from "../../../components/home_components/HouseDetail/HouseInfo"
import DetailFoot from "../../../components/home_components/HouseDetail/DetailFoot"
import { getHouseDetailData } from "../../../fetch/home"

// import details from "../../../static/images/home_img/detail1.png"

export default class HouseDetail extends React.Component{
  constructor(){
    super();
    this.state = {
      data:null
    }
  }
  componentDidMount () {
    let id  = this.props.match.params.id;
    getHouseDetailData(id)
    .then(data => {
      this.setState({
        data: data
      })
    })
  }

  render () {
    let { data } = this.state;
    return (
      data?
      <div>
        <DetailtHead />
        <div className="house-detail-banner">
          <Carousel banners={data.imgs}/>
        </div>
        <HouseInfo data={data}/>
        <DetailFoot />
      </div>
      :
      <div className="isLoading">正在加载数据...</div>
    )
  }

}